import { Divider, type MenuProps } from "antd";
import Dropdown, { type DropdownProps } from "antd/es/dropdown/dropdown";
import React from "react";
import { useTranslation } from "react-i18next";
import { NavLink } from "react-router";

import { IconButton } from "@/components/icon";
import { useLoginStateContext } from "@/pages/sys/login/providers/LoginStateProvider";
import { useRouter } from "@/router/hooks";
import { useUserActions, useUserInfo } from "@/store/userStore";
import { useThemeToken } from "@/theme/hooks";
import { useQuery, useMutation } from "@tanstack/react-query";
import userService from "@/api/services/userService";

const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;

/**
 * Account Dropdown
 */
export default function AccountDropdown() {
	const { replace } = useRouter();
	const { data } = useUserInfo();
	console.log("AccountDropdown", data);
	const { nickname, mobile, avatar } = data || {};
	console.log("AccountDropdown", nickname, mobile, avatar);
	const { clearUserInfoAndToken } = useUserActions();
	const { backToLogin } = useLoginStateContext();
	const { t } = useTranslation();

	const logout = async () => {
		clearUserInfoAndToken();
		backToLogin();
		replace("/login");
	};
	const { colorBgElevated, borderRadiusLG, boxShadowSecondary } =
		useThemeToken();

	const contentStyle: React.CSSProperties = {
		backgroundColor: colorBgElevated,
		borderRadius: borderRadiusLG,
		boxShadow: boxShadowSecondary,
	};

	const menuStyle: React.CSSProperties = {
		boxShadow: "none",
	};

	const dropdownRender: DropdownProps["dropdownRender"] = (menu) => (
		<div style={contentStyle}>
			<div className="flex flex-col items-start p-4">
				<div>{nickname}</div>
				<div className="text-gray">{mobile}</div>
			</div>
			<Divider style={{ margin: 0 }} />
			{React.cloneElement(menu as React.ReactElement, { style: menuStyle })}
		</div>
	);

	const items: MenuProps["items"] = [
		{
			label: (
				<NavLink to="/management/user/profile">
					{t("sys.menu.user.profile")}
				</NavLink>
			),
			key: "2",
		},

		{ type: "divider" },
		{
			label: (
				<button className="font-bold text-warning" type="button">
					{t("sys.login.logout")}
				</button>
			),
			key: "4",
			onClick: logout,
		},
	];

	return (
		<Dropdown
			menu={{ items }}
			trigger={["click"]}
			dropdownRender={dropdownRender}
		>
			<IconButton className="h-10 w-10 transform-none px-0 hover:scale-105">
				<img className="h-8 w-8 rounded-full" src={avatar} alt="" />
			</IconButton>
		</Dropdown>
	);
}
